<script setup>
  import { ref, defineProps } from 'vue';
  import { Plus } from "@element-plus/icons-vue";
  import { ElMessage } from "element-plus";
  import commonApi from "@/api/common/index.js";
  import LocalStoreUtil from "@/utils/LocalStoreUtil.js";

  // 接收父组件传参
  const props = defineProps({
    size: String, // max pro
    resultUrl: Function,
    prefix: String
  })

  let input = ref();

  // 响应式尺寸
  let parentHeight = ref(60);

  let mainWidth = ref(60);
  let mainHeight = ref(60);

  let uploadBtnSize = ref(24);

  let descTextSize = ref(10);
  if (props.size === 'max') {
    parentHeight.value = 100;

    mainWidth.value = 100;
    mainHeight.value = 100;

    uploadBtnSize.value = 42;

    descTextSize.value = 14;
  }

  // 是否完成上传
  let loadStatus = ref(false);
  let resultUrl = ref();

  const uploadBtn = () => {
    if (!LocalStoreUtil.isLogin()) {
      ElMessage.error('请登录后再进行文件上传！');
      //return;
    }
    input.value.click();
  }

  const reUpload = () => {
    loadStatus.value = false;
  }

  const upload = (event) => {
    // 获取上传文件数据
    const fileData = event.target.files[0];
    if (fileData) {
      commonApi.uploadForImage(props.prefix, fileData).then(response => {
        if (response.code === '200' && response.data.result)  {
          loadStatus.value = true;
          resultUrl.value = response.data.fileUrl;
          props.resultUrl(response.data.fileUrl);
          ElMessage.success('文件上传成功');
          return;
        }
        ElMessage.error(response.message === '' ? '文件上传失败' : response.message);
      })
    }
  }


</script>

<template>
  <div class="parent" :style="{
    height: parentHeight + 'px',
  }">

    <div class="main div-float" :style="{
      width: mainWidth + 'px',
      height: mainHeight + 'px',
    }">

      <input type="file" ref="input" accept="image/*"  v-show="false" @change="upload($event)">

      <!-- 上传图片按钮 -->
      <div class="upload-btn" :style="{
        fontSize: uploadBtnSize + 'px'
      }" v-if="!loadStatus" @click="uploadBtn" title="上传文件">
        <el-icon>
          <Plus />
        </el-icon>
      </div>

      <!-- 展示上传图片 -->
      <div class="load-image" v-if="loadStatus" @click="reUpload()" title="重新上传">
        <img :src="resultUrl" alt="图片">
      </div>

    </div>

    <div class="desc div-float" :style="{
      fontSize: descTextSize + 'px',
    }">仅支持上传 jpg、jpeg、png 等类型文件</div>
  </div>
</template>

<style scoped>
  .parent {
    overflow: hidden;
    position: relative;
  }

  .div-float {
    float: left;
  }

  .main {
    overflow: hidden;
  }

  .upload-btn {
    width: 100%;
    height: 100%;
    background-color: rgb(228, 228, 228);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .upload-btn:hover {
    cursor: pointer;
  }

  .load-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .load-image>img {
    width: 100%;
    height: auto;
  }

  .desc {
    overflow: hidden;
    color: red;
    padding-left: 5px;
    height: 100%;
    display: flex;
    align-items: flex-end;
  }
</style>